<template>
    <div class="app-container">
        <!-- 头部 -->
        <div class="formBox">
            <div class="count-box count-boxTop" id="countBoxContainers">
                <div class="item-box" @click="goToScanSum(1)">
                    <i class="el-icon-s-home" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">入驻医院数</span>
                    <div>
                        <span class="count">{{ allTotalObj.countHospital ? allTotalObj.countHospital : 0 }}</span>
                        <span class="unit">所</span>
                    </div>
                </div>
                <div class="item-box" @click="goToScanSum(2)">
                    <i class="el-icon-user-solid" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">用户总数</span>
                    <div>
                        <span class="count">{{ allTotalObj.countPatient ? allTotalObj.countPatient : 0 }}</span>
                        <span class="unit">个</span>
                    </div>
                </div>
                <div class="item-box" @click="goToScanSum(3)">
                    <i class="el-icon-s-check" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">医生总数</span>
                    <div>
                        <span class="count">{{ allTotalObj.countDoctor ? allTotalObj.countDoctor : 0 }}</span>
                        <span class="unit">个</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="formBox">
            <div class="contentBox">
                <div class="contentBoxRight">
                    <el-form class="" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                        <el-form-item label="选择医院">
                            <department :isHospital="true" @refreshData="refreshData" deptWidth="180px" :isUserAll="true"></department>
                        </el-form-item>
                        <el-form-item label="选择时间">
                            <el-date-picker v-model="dateRange" style="width: 200px;margin-right:10px;"
                                value-format="yyyy-MM-dd" type="daterange" size="mini" range-separator="-"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="getData"
                                :picker-options="pickerOptions" :clearable="false"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" @click="getData">刷新</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-radio-group v-model="selectradio" @input="changeselectradio">
                                <el-radio :label="1">按治疗</el-radio>
                                <el-radio :label="2">按诊断</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="count-box" id="countBoxContainers" v-if="queryParams.hospitalId&&selectradio==1" v-loading="loading">
                <div class="item-box">
                    <i class="el-icon-s-check" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">登记人次</span>
                    <div>
                        <span class="count">{{ hospitalCountObj.countVisit ? hospitalCountObj.countVisit : 0 }}</span>
                        <span class="unit">人次</span>
                    </div>
                </div>
                <div class="item-box">
                    <i class="el-icon-s-check" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">诊断人次</span>
                    <div>
                        <span class="count">{{ hospitalCountObj.countDoctor ? hospitalCountObj.countDoctor : 0 }}</span>
                        <span class="unit">人次</span>
                    </div>
                </div>
                <div class="item-box">
                    <i class="el-icon-s-check" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">治疗人次</span>
                    <div>
                        <span class="count">{{ hospitalCountObj.countTreatment ? hospitalCountObj.countTreatment : 0
                        }}</span>
                        <span class="unit">人次</span>
                    </div>
                </div>
                <div class="item-box">
                    <i class="el-icon-s-check" style="font-size:20px;color:#0256FF;"></i>
                    <span class="name">照片总数</span>
                    <div>
                        <span class="count">{{ hospitalCountObj.countPhoto ? hospitalCountObj.countPhoto : 0 }}</span>
                        <span class="unit">张</span>
                    </div>
                </div>
            </div>
            <div class="echart-box">
                <div id="treatmentAndIncome" style="width:100%;height:500px;" v-if="queryParams.hospitalId">
                    <div v-if="treatmentPlansList.length == 0">
                        暂无统计数据！
                    </div>
                </div>
                <div v-else>
                    <img class="parent-img" src="@/assets/404_images/404_cloud.png" alt="404">
                    <div class="parent-text">请选择医院，查看数据！</div>
                </div>
            </div>


        </div>

        


    </div>
</template>

<script>
import * as echarts from "echarts";
import department from "@/views/components/department/index.vue";
import { deptNameList } from "@/api/system/dept";
import { statisticsAll, statisticsHospitalByTime,statisticsDiseases } from "@/api/system/specialCom";
const treatmentAndIncomeOption = {
    title: {
        text: '治疗人次和收入表',
    },
    // 滚动条
    dataZoom: [
        {
            show: true,
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 20,
            xAxisIndex: [0],
            bottom: '0',
            left: '50',
            height: 10,
            borderColor: 'rgba(0,0,0,0)',
            textStyle: {
                color: 'transparent'
            }
        }
    ],
    label: {
        show: true, //开启显示数值
        position: 'top', //数值在上方显示
        textStyle: {  //数值样式
            //color: '#D1DBFF',   //字体颜色
            //fontSize: 14  //字体大小
        }
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            // dataView : {show: true, readOnly: false},
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    legend: {
        // Try 'horizontal'
        orient: 'vertical',
        right: 10,
        left: '0',
        top: 'center'
    },
    tooltip: {},
    dataset: {
        dimensions: ["treatmentName", "治疗人次"],
        source: [

        ],
    },
    yAxis: { //xAxis
        nameTextStyle: {
            borderType: "dotted",
            color: 'red'
        }
    },
    xAxis: {
        type: "category",
        padding: 30,

        axisLabel: {
            color: "red",
            rotate: 0,
            interval: 0,
            margin: 10,
            formatter(params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4;  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }

                } else {
                    newParamsName = params;
                }
                return newParamsName;

            }
        }
    },
    series: [{ type: "bar", color: "#165DFF", barWidth: "30" }],
};
export default {
    name: "platformSum",
    dicts: [
        'sys_info_type'
    ],
    components: { department },
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '前天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近1年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 遮罩层
            loading: true,
            // 日期范围
            dateRange: [],
            queryParams: {
                hospitalId: ''
            },
            deptNameLists: [],
            allTotalObj: {},
            hospitalCountObj: {},
            treatmentPlansList: [],
            selectradio: 1,
        };
    },
    watch: {},
    async created() {
        this.getstatisticsAll()
    },
    mounted() {
        this.dateRange = this.defaultTime


    },
    computed: {
        defaultTime: function () {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : "0" + month;
            day = day < 10 ? "0" + day : day;
            let today = year + "-" + month + "-" + day;
            let day0 = '01';
            let firtsDay = year + "-" + month + "-" + day0;
            return [firtsDay, today];
        },
    },
    methods: {
        changeselectradio(){
         console.log(this.selectradio) 
         this.getData()
        },
        goToScanSum(type) {
            if (type == 1) {
                this.$router.push({ path: "/specialCom/hospitalSum", query: {} });
            } else if (type == 2) {
                this.$router.push({ path: "/specialCom/userSum", query: {} });
            } else if (type == 3) {
                this.$router.push({ path: "/specialCom/doctorSum", query: {} });
            }
        },
        // 回显医院及门诊
        getdeptNameList() {
            deptNameList().then((response) => {
                this.deptNameLists = response.data;
                this.getData()

            });
        },
        getstatisticsAll() {
            statisticsAll().then((response) => {
                this.allTotalObj = response.data;
            });
        },
        refreshData(data) {
            console.log(data)
            if (data.hospitalId) {
                this.queryParams.hospitalId = data.hospitalId
                this.getdeptNameList()
            } else {
                this.queryParams.hospitalId = ''
            }


        },
        NumDescSort(a, b) {
            return b.count - a.count;
        },
        getData() {
            if (this.queryParams.hospitalId) {
                let that = this
                that.loading = true;
                let params = {
                    startTime: that.dateRange[0],
                    endTime: that.dateRange[1],
                    ...that.queryParams
                }
                if(that.selectradio==1){
                    statisticsHospitalByTime(params).then((response) => {
                    if (response.code == 200) {
                        let data = response.data;
                        console.log(data)
                        that.hospitalCountObj = data
                        let deptNameLists = that.deptNameLists
                        if (data.treatmentPlans && data.treatmentPlans.length > 20) {
                            treatmentAndIncomeOption.dataZoom[0].show = true
                        } else {
                            treatmentAndIncomeOption.dataZoom[0].show = false
                        }
                        deptNameLists.forEach(function (ele) {
                            if (ele.deptId == that.queryParams.hospitalId) {
                                treatmentAndIncomeOption.title.text = ele.deptName + ' ' + that.dateRange[0] + ' ~ ' + that.dateRange[1] + `${that.selectradio==1?'治疗人次统计表':'诊断人次统计表'}`
                                var treatmentAndIncomeChart = echarts.init(document.getElementById("treatmentAndIncome"));
                                let treatmentPlans = data.treatmentPlans.sort(that.NumDescSort);
                                let Optionarrs = []
                                var a = JSON.stringify(treatmentPlans).replace(/count/g, "治疗人次");
                                treatmentAndIncomeOption.dataset.source = JSON.parse(a)
                                treatmentAndIncomeOption.dataset.dimensions=["treatmentName", "治疗人次"]
                              
                                that.treatmentPlansList = treatmentPlans

                                if (treatmentPlans.length > 0) {
                                    treatmentAndIncomeChart.clear()
                                    treatmentAndIncomeChart.setOption(treatmentAndIncomeOption);
                                } else {
                                    treatmentAndIncomeChart.clear()
                                    treatmentAndIncomeChart.setOption({
                                        title: {
                                            text: '暂无统计数据!',
                                            x: 'center',
                                            y: 'center',
                                            textStyle: {
                                                fontSize: 16,
                                                color: '#909399',
                                                fontWeight: 'normal'
                                            }
                                        }
                                    })
                                }

                            }
                        })
                    }

                    that.loading = false;
                });
                }else if(that.selectradio==2){
                    statisticsDiseases(params).then((response) => {
                    if (response.code == 200) {
                        let data = response.data;
                        console.log(data)
                        that.hospitalCountObj = data
                        let deptNameLists = that.deptNameLists
                        if (data && data.length > 20) {
                            treatmentAndIncomeOption.dataZoom[0].show = true
                        } else {
                            treatmentAndIncomeOption.dataZoom[0].show = false
                        }
                        deptNameLists.forEach(function (ele) {
                            if (ele.deptId == that.queryParams.hospitalId) {
                                treatmentAndIncomeOption.title.text = ele.deptName + ' ' + that.dateRange[0] + ' ~ ' + that.dateRange[1] + `${that.selectradio==1?'治疗人次统计表':'诊断人次统计表'}`
                                var treatmentAndIncomeChart = echarts.init(document.getElementById("treatmentAndIncome"));
                                let treatmentPlans = data.sort(that.NumDescSort);
                                let Optionarrs = []
                                var a = JSON.stringify(treatmentPlans).replace(/count/g, "诊断人次");
                                treatmentAndIncomeOption.dataset.source = JSON.parse(a)
                                treatmentAndIncomeOption.dataset.dimensions=["diseaseClassifyName", "诊断人次"]
                                that.treatmentPlansList = treatmentPlans

                                if (treatmentPlans.length > 0) {
                                    treatmentAndIncomeChart.clear()
                                    treatmentAndIncomeChart.setOption(treatmentAndIncomeOption);
                                } else {
                                    treatmentAndIncomeChart.clear()
                                    treatmentAndIncomeChart.setOption({
                                        title: {
                                            text: '暂无统计数据!',
                                            x: 'center',
                                            y: 'center',
                                            textStyle: {
                                                fontSize: 16,
                                                color: '#909399',
                                                fontWeight: 'normal'
                                            }
                                        }
                                    })
                                }

                            }
                        })
                    }

                    that.loading = false;
                });
                }
           
            }


        },


    },
};
</script>
<style scoped>
.parent-img {
    width: 200px;
    height: 200px;
    display: block;
    margin: 10px auto;
}

.parent-text {
    color: #999;
    text-align: center;
}

.count-boxTop {
    justify-content: center;

    .item-box {
        cursor: pointer;
    }
}

.echart-box {
    margin-top: 20px;
}

.contentBoxRight {
    display: flex;
    align-items: center;
}

.count-box {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;

    .item-box:last-child {
        margin-right: 0px;
    }

    .item-box {
        box-sizing: border-box;
        margin: 10px 20px 10px 0px;
        width: 229px;
        height: 89px;
        background: #E3EBFF;
        border-radius: 8px 8px 8px 8px;
        padding-left: 17px;
        padding-top: 14px;

        .name {
            font-size: 18px;
            margin-left: 8px;
            color: #1D2129;
        }

        .count {
            font-size: 36px;
            margin-left: 28px;
            margin-top: 15px;
            color: #0256FF;
        }

        .unit {
            margin-left: 8px;
            color: #767676
        }
    }
}

::v-deep .el-upload-list__item-thumbnail {
    display: none;
}
</style>
